<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #fff;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
        #tab1 .aui-active{
          color: #f23030;
          border-bottom: 2px solid #f23030;
        }
        .aui-list-item-middle{
          padding-left: 0.75rem;
        }
        .aui-radio:checked{
          background-color: #f23030;
          border: solid 1px #f23030;
        }

        .aui-toast-content{
          color: #fff;
        }
        .login_title{
          font-size: 1.2rem;
          text-align: center;
          font-weight: 600;
          margin-top: 2rem;
        }
        .login_title_en{
          text-align: center;
          color: #827a7a;
          margin-bottom: 1.9rem;
        }
        .aui-list{
              background-image: none;
        }
      </style>
  </head>
  <body>
<div id="app" style="box-sizing:border-box">
  <div style="width:3rem;height:3rem;margin:0 auto;margin-top:1.5rem">
    <img src="../../image/my/LOGO.png" alt="">
  </div>
  <ul class="aui-list aui-form-list" style="margin-top: 1.2rem;">
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-mobile"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="Number" placeholder="请输入手机号" v-model="phone">
              </div>
              <div class="aui-list-item-label-icon" style="width: 1rem;height:1rem;">
                 <img src="../../image/my/m64.png" alt="" @click="registerClear">
              </div>
          </div>
      </li>
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <img src="../../image/my/m65.png" alt="" style="width: 1rem;">
              </div>
              <div class="aui-list-item-input">
                  <input type="Number" placeholder="请输入验证码" style="border-right: 1px solid #eee;" v-model="code" @blur="validation">
              </div>
              <div class="aui-list-item-label-icon" style="width: 6rem;text-align:center;" @click="mycode">
                  <div style="color:#f23030;">{{codeMsg}}</div>
              </div>
          </div>
      </li>
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-lock"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="password" placeholder="请输入新密码" v-model="password" :maxlength=maxLengths class="registerPassword1">
              </div>
              <div class="aui-list-item-label-icon" @click="isShowPassword('1')">
                  <i class="aui-iconfont aui-icon-display"></i>
              </div>
          </div>
      </li>
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-lock"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="password" placeholder="请再次输入新密码" v-model="reRassword" :maxlength=maxLengths class="registerPassword2">
              </div>
              <div class="aui-list-item-label-icon" @click="isShowPassword('2')">
                  <i class="aui-iconfont aui-icon-display"></i>
              </div>
          </div>
      </li>
  </ul>

    <div style="width:80vw;margin:0 auto;background:#F62525;color:#fff;text-align:center;height:2rem;line-height:2rem;margin-top: 2rem;border-radius:1rem;" @click="myforgotPassword">确认并登录</div>
</div>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>

  <script type="text/javascript">
  apiready = function(){
    var toast = new auiToast({});
    new Vue({
      el:'#app',
      data:{
        phone:'',
        password:'',
        code:'',
        dealUrl:'',
        codeMsg:'发送验证码',
        isclick:true,
        reRassword:'',
        maxLengths:0,
        codeLengths:0,
        forgotCode:false
      },
      methods:{

        registerClear:function(){
          this.phone= "";
        },
        isShowPassword:function(val){
          if($('.registerPassword'+val).attr('type')!='text'){
              $('.registerPassword'+val).attr('type','text')
          }else{
              $('.registerPassword'+val).attr('type','password')
          }
        },
        myforgotPassword:function(){
          var _this = this;
          if(_this.phone == ""){
            toast.fail({
                    title:"手机号不能为空",
                    duration:2000
                });
            return;
          }else if(!checkMobile(_this.phone)){
            toast.fail({
                    title:"手机号错误",
                    duration:2000
                });
              return;
          }
          if(_this.code == ""){
            toast.fail({
                    title:"验证码不能为空",
                    duration:2000
                });
            return;
          }
          if(_this.password == ""){
            toast.fail({
                    title:"新密码不能为空",
                    duration:2000
                });
            return;
          }
          if(_this.reRassword == ""){
            toast.fail({
                    title:"确认密码不能为空",
                    duration:2000
                });
            return;
          }

          api.ajax({
             url: window.Url.Freeuser_forgotPassword,
             method: 'post',
             data: {
               values: {
                 mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                 code: _this.code,
                 password:  Base64.encode('UNO' + _this.password + 'HACHA'),
                 repassword: Base64.encode('UNO' + _this.reRassword + 'HACHA')
               }
             }
           }, function(ret, err) {
               if (ret.re == 1) {
                   toast.success({
                     title:ret.info,
                     duration:1000
                   })
                     //如果注册成功执行
                    setTimeout(function(){api.closeToWin({name: 'login'});},1000)
               } else {
                 toast.fail({
                   title:ret.info,
                   duration:1000
                 })
               }
           })
        },
        mycode:function(){
          var _this = this;
          if(_this.phone == ""){
            toast.fail({
                    title:"手机号不能为空",
                    duration:2000
                });
            return;
          }
          if(_this.isclick){
            api.ajax({
               url: window.Url.Freeuser_getMessage,
               method: 'post',
               data: {
                 values: {
                   code: 'UNOHACHA',
                   mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                   type: 3
                 }
               }
             }, function(ret, err) {
                 if (ret.re==1) {
                   _this.isclick = false;
                  _this.codeLengths=6;
                   var num = 60;
                   var time = setInterval(function(){
                       num--;
                       _this.codeMsg = num +'s';
                       if(num == 0){
                         clearInterval(time);
                         _this.codeMsg = '重新发送';
                         _this.isclick = true;
                       }

                   },1000)
                      toast.success({
                        title:ret.info,
                        duration:1000
                      })
                      _this.forgotCode=true
                 } else {
                   toast.fail({
                     title:ret.info,
                     duration:1000
                   })
                 }
             })
          }
        },
        //验证验证码
        validation:function(){
          var _this = this;
          if(!_this.forgotCode){
            toast.fail({
              title:'请获取验证码',
              duration:1000
            });
            return;
          }
          api.ajax({
              url: window.Url.Freeuser_verification,
              method: 'post',
              data: {
                  values: {
                      mobile:Base64.encode('UNO' + _this.phone + 'HACHA'),
                      code:_this.code,
                      type:3
                  }
              }
          },function(ret, err){
              if(ret.re==0 && _this.code!=''){
                toast.fail({
                  title:ret.info,
                  duration:1000
                })
                return;
              }
              if (ret.re==1) {
                  toast.success({
                    title:ret.info,
                    duration:1000
                  })
                  _this.maxLengths=20;

              } else {
                toast.fail({
                  title:ret.info,
                  duration:1000
                })
              }
          });

        },

      },
      mounted:function(){

      },
      updated:function(){}
    })
  };
  </script>
  </html>
